<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>09.5处理多个输入</title>
</head>

<body>
  <div id="root"></div>

  <!-- 加载 React。-->
  <script src="../js/react@16.development.js"></script>
  <script src="../js/react-dom@16.development.js"></script>
  <script src="../js/babel@6.min.js"></script>

  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">

    // 在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同
    // 因为表单元素通常会保持一些内部的 state。

    // 受控组件 就是他的值可以被我们控制，不仅仅是读取
    // 处理多个输入

    // 当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，
    // 并让处理函数根据 event.target.name 的值选择要执行的操作。

    class Reservation extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isGoing: true, // 
          numberOfGuests: 2 // 
        };

        // 输入改变的方法
        this.handleInputChange = this.handleInputChange.bind(this)
      }

      handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox'
          ? target.checked
          : target.value;
        const name = target.name;
        this.setState({
          [name]: value
        });
      }

      render() {
        return (
          <form>
            <label>参与：
              <input
                name="isGoing"
                type="checkbox"
                checked={this.state.isGoing}
                onChange={this.handleInputChange} />
            </label>
            <br />
            <label>
              来宾人数：
              <input
                name="numberOfGuests"
                type="number"
                value={this.state.numberOfGuests}
                onChange={this.handleInputChange}
              />
            </label>
          </form>
        )
      }
    }

    ReactDOM.render(
      <Reservation />,
      document.getElementById('root')
    );


  </script>
</body>

</html>